<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器学习</title>
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js" ></script>
</head>
<body>

<!--2、写希望让vue控制的html区域-->
<div id="app">
    <p style="color: red">方法格式的侦听器</p>
    <input type="text" v-model="name">
    <hr>
    <p style="color: red">对象格式的侦听器</p>
    <input type="text" v-model="username">
    <hr>
    <p style="color: red">对象格式的侦听器-深度侦听</p>
    <input type="text" v-model="user.name">

</div>

</body>
</html>
<script>

    //3.创建vue对象，并渲染dom
    new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app",
        //data是要渲染的数据
        data:{
            name:'张三',
            username:'李四',
            user:{
                name:'王五'
            }
        },
        //侦听器本质是一个函数，要监视哪个数据的变化，就把哪个数据作为方法名(
        // 但是方法格式的侦听器页面加载完后不会自动触发，如果想要让页面加载完后也需要执行则需要使用对象格式的侦听器
        //)
        watch:{
            name(newVal,oldVal){
                console.log('name is changing',oldVal,newVal)
            },
            username:{
                //质疑handler方法名是默认不能变的
                handler(newVal,oldVal){
                    console.log('name is changing',oldVal,newVal)
                },
                //默认页面加载完成之后，如果为true则立马执行一次
                immediate:true
            },
            user:{
                //注：这里的name都是一样的，oldVal拿到的name也是新的(不知道咋回事)，所以建议使用下面的方式，对对象进行侦听
                handler(newVal,oldVal){
                    console.log('newVal',newVal);
                    console.log('oldVal',oldVal);
                },
                deep:true
            },
            'user.name':{
                handler(newVal,oldVal){
                    console.log('newVal',newVal);
                    console.log('oldVal',oldVal);
                }
            }
        }
    });

</script>
